<template>
  <div class="dataview" :style="{backgroundImage: `url(${require('./assets/img/bg.jpg')})`}">
    <div class="title" :style="{backgroundImage: `url(${require('./assets/img/title-bg.png')})`}">
      数据统计
      <div class="time-view">
        <span>时间选择：</span>
        <a-range-picker
          class="rank-time"
          :allowClear="false"
          style="width: 280px"
          v-model="rangTime"
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD "
          :placeholder="['', '']"
          dropdownClassName="rank-calendar"
          @change="(s, t) => onChange(s, t)"
        >
          <a-icon slot="suffixIcon" type="calendar" />
        </a-range-picker>
      </div>
    </div>
    <div class="dataview-card">
      <div class="dataview-left">
        <p class="showtime">{{ params.start }} - {{ params.end }}</p>
        <div class="left-card" :style="{backgroundImage: `url(${require('./assets/img/left-card-1.png')})`}">
          <div>
            <p>事件总数</p>
            <p><span>{{ rightData.disposed || 0 }}</span> 件</p>
            <img :src="require('./assets/img/icon1.png')" alt="">
          </div>
        </div>
        <div class="left-card" :style="{backgroundImage: `url(${require('./assets/img/left-card-2.png')})`}">
          <div>
            <p>晚报总数</p>
            <p><span>{{ rightData.routineMatters || 0 }}</span> 件</p>
            <img :src="require('./assets/img/icon2.png')" alt="">
          </div>
        </div>
        <div class="left-card" :style="{backgroundImage: `url(${require('./assets/img/left-card-3.png')})`}">
          <div>
            <p>应急总数</p>
            <p><span>{{ rightData.worry || 0 }}</span> 件</p>
            <img :src="require('./assets/img/icon3.png')" alt="">
          </div>
        </div>
      </div>
      <div class="center-card">
        <ChartCircle :data="rightData" />
      </div>
      <div class="right-card">
        <div class="k" :style="{backgroundImage: `url(${require('./assets/img/kuang.png')})`}">
          <div class="k-title">各区域事件统计</div>
          <div class="select-time">
            <a-select class="theme-drap theme-drap-2" :dropdownMatchSelectWidth="false" v-model="areaSBossQuery.type" @change="changeEventTime">
              <a-select-option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
            <a-select class="theme-drap" :dropdownMatchSelectWidth="false" v-model="areaSBossQuery.date" @change="changeEventTime">
              <a-select-option v-for="item in timeList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
            </a-select>
          </div>
          <Bar style="height: 275px;margin-top: -30px;" :data="areaData" :nowTime="nowTime" />
        </div>
        <div class="k" :style="{backgroundImage: `url(${require('./assets/img/kuang.png')})`}">
          <div class="k-title">各平台事件热度</div>
          <BarCircle :data="sourceData" />

        </div>
      </div>
    </div>
    <div class="dataview-card">
      <!-- <div class="bottom-card-big">

      </div> -->
      <div class="k-big" :style="{backgroundImage: `url(${require('./assets/img/kuang-big.png')})`}">
        <div class="k-title">各区域事件统计</div>
        <Lines :data="lineData" />
      </div>
      <div class="k kright" :style="{backgroundImage: `url(${require('./assets/img/kuang.png')})`}">
        <!-- <div class="k-title">各平台事件热度</div>
        <Bar3d :data="eventData" /> -->

        <div class="k-title">各类型事件统计</div>
        <div class="select-time">
          <a-select class="theme-drap theme-drap-2" :dropdownMatchSelectWidth="false" v-model="eventSBossQuery.address" @change="changeEventTime2">
            <a-select-option v-for="item in address" :key="item.id" :value="item.id ? item.title : ''">{{ item.title }}</a-select-option>
          </a-select>
          <a-select class="theme-drap" :dropdownMatchSelectWidth="false" v-model="eventSBossQuery.date" @change="changeEventTime2">
            <a-select-option v-for="item in timeList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </div>
        <Bar style="height: 275px;margin-top: -30px;" :data="eventData" :nowTime="nowTime2" />
      </div>
    </div>
  </div>
</template>
<script>
import ChartCircle from './ChartCircle';
import BarCircle from './charts/BarCircle/Index';
import Bar from './charts/Bar/Index';
import Bar3d from './charts/Bar3d/Index';
import Lines from './charts/Line/Index';
import moment from 'moment';
import cloneDeep from 'lodash/cloneDeep';

import { getDataStatisticsNow, getDataStatisticsTimes, getAllPossession, getEventAddress2, getSourceAddress, getEventMonth, eventTypeId, getEventType2 } from '@/api/serve';

export default {
  components: {
    ChartCircle,
    BarCircle,
    Bar,
    Bar3d,
    Lines
  },
  data() {
    return {
      data: {},
      areaSBossQuery: {
        date: moment().format('YYYY'),
        type: ''
      },
      eventSBossQuery: {
        date: moment().format('YYYY'),
        address: ''
      },
      rightData: {},
      areaData: [],
      sourceData: [],
      rangTime: [moment().startOf('months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      lineData: {},
      eventData: [],
      params: {
        start: moment().startOf('months').format('YYYY-MM-DD'),
        end: moment().format('YYYY-MM-DD')
      },
      eventTypeData: {
        date: moment().format('YYYY')
      },
      nowTime: {
        label: moment().format('YYYY') + '年',
        pre: moment().add(-1, 'year').format('YYYY') + '年'
      },
      nowTime2: {
        label: moment().format('YYYY') + '年',
        pre: moment().add(-1, 'year').format('YYYY') + '年'
      },
      typeList: [],
      address: []
    };
  },
  created() {
    this.init();
  },
  computed: {
    timeList() {
      const nowYear = moment().format('YYYY');
      const arr = [{
        value: nowYear,
        label: `${nowYear}全年`,
        pre: `${nowYear - 1}全年`
      }];
      for (let i = 1; i <= 12; i++) {
        const m = i < 10 ? `0${i}` : i;
        arr.push({
          value: `${nowYear}-${m}-01`,
          label: `${nowYear}年${i}月`,
          pre: `${nowYear - 1}年${i}月`
        });
      }
      return arr;
    }
  },
  methods: {
    init() {
      this.getDataStatisticsNow();
      this.getDataStatisticsTimes();
      this.getEventAddress();
      this.getSourceAddress();
      this.getEventMonth();
      this.getEventType();
      this.getType();
      this.getAddress();
    },
    getDataStatisticsNow() {
      getDataStatisticsNow(this.params).then(res => {
        this.data = res.data || {}
      });
    },
    getDataStatisticsTimes() {
      getDataStatisticsTimes(this.params).then(res => {
        this.rightData = res.data;
      });
    },
    changeEventTime(e) {
      console.log(e);
      const nowTime = this.timeList.find(m => m.value === e);
      if (nowTime) {
        const newTime = cloneDeep(nowTime);
        if (newTime.pre.includes('全年')) {
          newTime.pre = newTime.pre.replace('全年', '年');
          newTime.label = newTime.label.replace('全年', '年');
        }
        this.nowTime = newTime;
      }
      this.getEventAddress();
    },
    changeEventTime2(e) {
      console.log(e);
      const nowTime = this.timeList.find(m => m.value === e);
      if (nowTime) {
        const newTime = cloneDeep(nowTime);
        if (newTime.pre.includes('全年')) {
          newTime.pre = newTime.pre.replace('全年', '年');
          newTime.label = newTime.label.replace('全年', '年');
        }
        this.nowTime2 = newTime;
      }
      console.log(this.nowTime2);
      this.getEventType();
    },
    getEventAddress() {
      getEventAddress2(this.areaSBossQuery).then(res => {
        this.areaData = res.data;
      });
    },
    getSourceAddress() {
      getSourceAddress(this.params).then(res => {
        this.sourceData = res.data.filter((e, i) => {
          return e.source;
        });
      });
    },
    getEventType() {
      getEventType2(this.eventSBossQuery).then(res => {
        this.eventData = res.data.map(e => {
          return {
            ...e,
            address: e.name
          };
        });
      });
    },
    getAddress() {
      getAllPossession().then(res => {
        this.address = [{
            id: '',
            title: '全部属地'
          },
        ...res.data];
      });
    },
    getEventMonth() {
      // 日常
      const normal = getEventMonth({
        handleType: 0
      });
      // 处置
      const cz = getEventMonth({
        handleType: 1
      });
      // 全部
      const all = getEventMonth({
        handleType: 2
      });
      // 观察
      const look = getEventMonth({
        handleType: 3
      });

      Promise.all([normal, cz, all, look]).then(res => {
        const normalData = res[0].data;
        const czData = res[1].data;
        const allData = res[2].data;
        const lookData = res[3].data;

        const month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        const monthArr = month.map(e => {
          return {
            month: e,
            label: e + '月',
            sum: undefined
          };
        });
        const monthLabel = monthArr.map(e => e.label);

        const normalDataRes = this.dataFormat(normalData, monthArr, '日常');
        const czDataRes = this.dataFormat(czData, monthArr, '应急');
        const lookDataRes = this.dataFormat(lookData, monthArr, '观察');
        const allDataRes = this.dataFormat(allData, monthArr, '总量');

        this.lineData = {
          '日常': normalDataRes,
          '应急': czDataRes,
          '观察': lookDataRes,
          '总量': allDataRes,
          month: monthLabel
        };
        // const lookData = res[0].data
      });
    },
    dataFormat(data, monthArr, name) {
      const dataArr = JSON.parse(JSON.stringify(monthArr));
      dataArr.forEach(e => {
        e.name = name;
        const res = data.find(m => Number(m.month) == e.month);
        if (res) {
          e.sum = Number(res.sum);
        }
      });

      console.log(dataArr);
      return dataArr;
    },
    onChange(e, time) {
      console.log(time);
      this.params.start = time[0];
      this.params.end = time[1];
      this.init();
    },
    getType() {
      eventTypeId().then(res => {
        this.typeList = [
          {
            id: '',
            name: '全部类型'
          },
          ...res.data
        ];
      });
    }
  }
};
</script>
<style lang="less">
.rank-calendar {
  .ant-calendar {
    background: rgba(24,42,84, 0.9);
    border: 2px solid #5fa3f7;
  }
  input {
    background: transparent !important;
    color: #fff !important;
  }
  tr,td,.ant-calendar-date,.ant-calendar-header .ant-calendar-century-select, .ant-calendar-header .ant-calendar-decade-select, .ant-calendar-header .ant-calendar-year-select, .ant-calendar-header .ant-calendar-month-select {
    color: #fff !important;
  }
  .ant-calendar-last-month-cell .ant-calendar-date {
    color: #aaa !important;
  }
  .ant-calendar-today .ant-calendar-date {
    border-color: #5fa3f7;
  }
  .ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date,.ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date {
    background: #5fa3f7;
  }
  .ant-calendar-range .ant-calendar-in-range-cell::before {
    background: #304966;
  }
  .ant-calendar-input-wrap, .ant-calendar-range .ant-calendar-body, .ant-calendar-range .ant-calendar-month-panel-body, .ant-calendar-range .ant-calendar-year-panel-body, .ant-calendar-range .ant-calendar-decade-panel-body {
    border-color: #5fa3f7;
  }
  .ant-calendar-header .ant-calendar-next-month-btn::before, .ant-calendar-header .ant-calendar-next-month-btn::after,.ant-calendar-header .ant-calendar-next-century-btn::before, .ant-calendar-header .ant-calendar-next-decade-btn::before, .ant-calendar-header .ant-calendar-next-year-btn::before, .ant-calendar-header .ant-calendar-next-century-btn::after, .ant-calendar-header .ant-calendar-next-decade-btn::after, .ant-calendar-header .ant-calendar-next-year-btn::after,.ant-calendar-header .ant-calendar-prev-month-btn::before, .ant-calendar-header .ant-calendar-prev-month-btn::after, .ant-calendar-header .ant-calendar-prev-century-btn::before, .ant-calendar-header .ant-calendar-prev-decade-btn::before, .ant-calendar-header .ant-calendar-prev-year-btn::before, .ant-calendar-header .ant-calendar-prev-century-btn::after, .ant-calendar-header .ant-calendar-prev-decade-btn::after, .ant-calendar-header .ant-calendar-prev-year-btn::after {
    border-color: #fff;
  }
  .ant-calendar-header a:hover {
    color: #5fa3f7;
    // transform: scale(1.2);
  }
}
.dataview {

  .time-view {
    position: absolute;
    right: 50%;
    top: 30px;
    margin-right: -750px;
    font-size: 16px;
    color: #fff;
    display: flex;
    line-height: 1;
    align-items: center;
    // justify-content: cen;
  }
  .rank-time {
    position: static;
    opacity: 1 !important;
    padding-right: 40px;
    padding-left: 0;
    i {
      color: #fff;
    }
    span {
      color: #fff;
    }
    .ant-input {
      background: none;
      border: 1px solid #fff;
      color: #fff;
      padding: 0;
      input {
        width: 38%;
      }
    }
  }
}

</style>
<style scoped lang="less">
.dataview {
  background-size: 100% 100%;
  background-position: center;
  width: 1900px;
  height: 1140px;

  .title {
    width: 100%;
    height: 119px;
    background-size: 1920px 119px;
    background-position: center;
    font-size: 52px;
    // font-family: Benmo Qianghei;
    font-weight: bold;
    text-align: center;
    color: #7EFAFC;
    line-height: 100px;
  }

  .dataview-card {
    display: flex;
    justify-content: space-between;
    // max-width: 1900px;
    // margin-right: 20px;
    box-sizing: border-box;
    padding: 0 20px;
    // padding-right: 40px;
    .dataview-left {
      // margin-left: 20px;
      position: relative;
      .showtime {
        color: #fff;
        font-size: 20px;
        position: absolute;
        top: -40px;
        left: 30px;
      }
      // transform: scale(0.85) translate(-160px, -70px);
      .left-card {
        width: 613px;
        height: 173px;
        background-size: 613px 173px;
        background-position: center;
        display: flex;
        align-items: center;
        >div {
          margin-left: 42px;
          position: relative;
          width: 477px;
          >p:first-child {
            font-size: 24px;
            font-weight: 400;
            color: #4CB1FF;
            line-height: 21px;
            margin: 0;
            margin-bottom: 27px;
            margin-top: 30px;
          }
          >p:nth-child(2) {
            font-size: 38px;
            font-weight: 500;
            color: #4DB2FF;
            line-height: 33px;
            span {
              color: #E5F4FF;
            }
          }
          img {
            position: absolute;
            right: 0;
            top: 24px;
          }
        }
        &:nth-child(3) {
          >div {
            width: 420px;
          }
          width: 552px;
          height: 177px;
          background-size: 552px 177px;
          margin-top: 25px;
        }
        &:nth-child(4) {
          >div {
            width: 420px;
          }
          width: 550px;
          height: 175px;
          background-size: 550px 175px;
          margin-top: 25px;
        }
      }
    }
  }
  .center-card {
    margin-left: -20px;
  }
  .right-card {
    // margin-right: 20px;
    // margin-top: 20px;
    .k:last-child {
      margin-top: 28px;
    }
  }
}

.k {
  width: 613px;
  height: 295px;
  background-size: 100% 100%;
  position: relative;
  // margin-right: -4px;
  .k-title {
    font-size: 18px;
    font-weight: 400;
    color: #DEF1FF;
    line-height: 48px;
    text-align: center;
  }
}
.kright {
  // position: absolute;
  // right: 20px;
  margin-left: 78px;
}
.bottom-card-big {
  display: flex;
  // justify-content: space-between;
  width: 100%;
  width: 1900px;
  flex-shrink: 1;
  // padding-right: 20px;
  // padding-left: 20px;
}
.k-big{
  width: 1173px;
  height: 295px;
  background-size: 100% 100%;
  .k-title {
    font-size: 18px;
    font-weight: 400;
    color: #DEF1FF;
    line-height: 48px;
    text-align: center;
  }
}

.select-time {
  position: absolute;
  right: 4px;
  top: 12px;
  z-index: 888;
}
</style>
<style lang="less">
.theme-drap {
  width: 90px;
  padding: 0;
  transform: scale(0.85);
  &:last-child {
    margin-left: -8px;
  }
  .ant-select-selection__rendered {
    margin-left: 6px;
    margin-right: 20px;
  }
  .ant-select-selection {
    padding: 0 !important;
    background: rgba(2, 17, 18, 0.7);
    box-shadow: 0 0 20px inset rgba(49, 84, 137, 0.5), 0 0 20px inset rgba(49, 84, 137, 0.5);
    box-sizing: border-box;
    border-color: #4CB1FF;
    color: #fff;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.5px;
    .ant-select-selection-selected-value {
      margin: 0 auto;
    }
    .ant-select-arrow {
      color: #fff;
    }
  }
}
</style>
